<template>
    <div class="albumBox">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="他的相册" name="meAlbum">
                <div class="emptyBox" v-if="!isShowPhotoDetail">
                    <div class="btns">
                        <!-- <el-button type="warning" size="mini" @click="uploadPhotos=true">上传照片</el-button>
                        <el-button type="info" size="mini" class="newly" @click="addAlbumV=true">新建相册
                        </el-button> -->
                        <el-dropdown trigger="click" placement="bottom">
                            <el-button type="text">排序方式<i class="el-icon-arrow-down el-icon--right"></i></el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>
                                    <el-button type="text" @click="albumSort = 1">最新上传在前</el-button>
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <el-button type="text" @click="albumSort = 2">最新上传在后</el-button>
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <el-button type="text" @click="albumSort = 3">最新新建在前</el-button>
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <el-button type="text" @click="albumSort = 4">最新新建在后</el-button>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <!-- 相册列表 -->
                    <ul class="photoBox clearFix">
                        <li class="photoList" v-for="(item, index) in photoalbumlist.list" :key="index">
                            <div class="photo">
                                <!-- <div class="dropdownBox">
                                    <el-dropdown trigger="click" @command="handlePhotoEditing">
                                        <el-button size="mini" type="text" icon="el-icon-caret-bottom"></el-button>
                                        <el-dropdown-menu slot="dropdown">
                                            <el-dropdown-item :command='item'>
                                                <el-button @click="commandTemporary = 'edit'" type="text" style="width:100%">编辑</el-button>
                                            </el-dropdown-item>
                                            <el-dropdown-item :command="item" :param='item'>
                                                <el-button @click="setProminsion(item)" type="text">权限设置
                                                </el-button>
                                            </el-dropdown-item>
                                            <el-dropdown-item :command='item'>
                                                <el-button @click="commandTemporary = 'delete'" type="text" style="width:100%">删除
                                                </el-button>
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div> -->

                                <div class="imgBox" @click="openAlbumPhoto(item)">
                                    <el-image :src="item.cover | pictureUrl" style="cursor:pointer;">
                                        <div slot="placeholder" class="image-slot">
                                            加载中<span class="dot">...</span>
                                        </div>
                                        <div slot="error" class="image-slot">
                                            <i class="el-icon-picture-outline"></i>
                                        </div>
                                    </el-image>
                                </div>
                                <div class="imgNum">
                                    <span>{{item.picturesNum}}</span>
                                </div>
                            </div>
                            <div class="classificationName clearFix">
                                <label class="className">{{item.photoname}}</label>
                                <label class="jurisdiction">{{item.jurisdictionname}}</label>
                            </div>
                        </li>
                    </ul>
                    <!-- 最近访客 -->
                    <div class="recentVisitors">
                        <div class="total">
                            <label>最近访客</label>
                            <el-button type="text">访客总数：{{albumVisitorPageL.totals}}</el-button>
                        </div>
                        <ul class="visitorsBox clearFix">
                            <li class="visitorsList" v-for="(item, index) in albumVisitorPageL.result.list" :key="index">
                                <!-- <i class="el-icon-close delete" @click="handleDeleteRecord"></i> -->
                                <div class="visitorsPortrait">
                                    <el-avatar :size="100" :src="item.photo | pictureUrl"></el-avatar>
                                    <label class="visitorsName">{{item.username}}</label>
                                </div>
                                <div class="visitorsTime">
                                    <label>{{item.creationtime}}</label>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <!--新建相册-->
                    <el-dialog title="新建相册" :visible.sync="addAlbumV" width="660px" center>
                        <el-form ref="addAlbumForm" :model="addAlbumForm" label-width="80px" :rules="rules">
                            <el-form-item label="名称">
                                <el-input type="text" placeholder="请输入内容" v-model="addAlbumForm.name" maxlength="30"
                                    :show-word-limit="true" required></el-input>
                            </el-form-item>
                            <el-form-item label="描述">
                                <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="addAlbumForm.describe"
                                    maxlength="50" :show-word-limit="true" required></el-input>
                            </el-form-item>
                            <el-form-item label="设置封面">
                                <el-upload ref="upload" :auto-upload="true" :limit='1'
                                    :on-change="handleChange" :action="'' | baseUpPUrl" list-type="picture-card">
                                    <i slot="default" class="el-icon-plus"></i>
                                    <div slot="file" slot-scope="{file}">
                                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                                        <span class="el-upload-list__item-actions">
                                            <span class="el-upload-list__item-preview"
                                                @click="handlePictureCardPreview(file)">
                                                <i class="el-icon-zoom-in"></i>
                                            </span>
                                            <span v-if="!disabled" class="el-upload-list__item-delete"
                                                @click="handleRemove(file)">
                                                <i class="el-icon-delete"></i>
                                            </span>
                                        </span>
                                    </div>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisible">
                                    <img width="81%" :src="dialogImageUrl" alt="">
                                </el-dialog>
                            </el-form-item>
                            <el-form-item label="相册权限">
                                <el-select v-model="addAlbumForm.jurisdictionid" placeholder="请选择权限"
                                    style="width: 100%;">
                                    <el-option :label="item.name" :value="item.id"
                                        v-for="(item, index) in permissionArr" :key="index"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="其他权限">
                                <el-radio-group v-model="addAlbumForm.isReprint">
                                    <el-radio label="1">允许转载</el-radio>
                                    <el-radio label="2">不允许转载</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item style="text-align: right;">
                                <el-button type="primary" size="small" @click="addAlbumSub('addAlbumForm')">确定
                                </el-button>
                                <el-button size="small" @click="addAlbumV=false">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>

                    <!--编辑照片组信息-->
                    <el-dialog title="编辑照片组信息" :visible.sync="photoEditing" width="660px" center>
                        <el-form ref="form"  label-width="80px">
                            <el-form-item label="名称">
                                <el-input type="text" placeholder="请输入内容" v-model="albumTemporary.photoname" maxlength="10"
                                    :show-word-limit="true"></el-input>
                            </el-form-item>
                            <el-form-item label="描述">
                                <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="albumTemporary.discribe"
                                    maxlength="50" :show-word-limit="true"></el-input>
                            </el-form-item>
                            <el-form-item style="text-align: right;">
                                <el-button type="primary" size="small" @click="updatePhotoalbum">确定</el-button>
                                <el-button size="small" @click="photoEditing=false">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>

                    <!-- 权限设置 -->
                    <el-dialog title="权限设置" width="650px" :visible.sync="albumPermissionUV">
                        <el-radio-group v-model="upPermission">
                            <el-radio :label="item.id" v-for="(item, index) in permissionArr" :key="index">{{item.name}}
                            </el-radio>
                        </el-radio-group>
                        <div class="Popubtn">
                            <el-button type="primary" @click="updatePermissionDo()" plain>确定</el-button>
                            <el-button plain @click="albumPermissionUV=false">取消</el-button>
                        </div>
                    </el-dialog>
                    <!--上传照片-->
                    <el-dialog title="上传照片" :visible.sync="uploadPhotos" width="690px" center>
                        <div class="uploadPhotosBox">
                            <div class="uploadTo">
                                <label>上传到：</label>
                                <el-select v-model="uploadTo" placeholder="请选择" size="mini">
                                    <el-option :label="item.photoname" :value="item.id" v-for="(item, index) in photoalbumlist.list" :key="index"></el-option>
                                </el-select>
                                <!-- <label class="sizeLeft">相册尺寸：</label>
                                <el-radio-group v-model="size">
                                    <el-radio label="普通"></el-radio>
                                    <el-radio label="高清"></el-radio>
                                    <el-radio label="原图"></el-radio>
                                </el-radio-group> -->
                            </div>
                            <div class="uploadList">
                                <el-upload ref="upload" :auto-upload="true" :multiple='true' :limit='20'
                                    :on-change="handleChange" :action="'' | baseUpPUrl" list-type="picture-card">
                                    <i slot="default" class="el-icon-plus"></i>
                                    <div slot="file" slot-scope="{file}">
                                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                                        <span class="el-upload-list__item-actions">
                                            <span class="el-upload-list__item-preview"
                                                @click="handlePictureCardPreview(file)">
                                                <i class="el-icon-zoom-in"></i>
                                            </span>
                                            <span v-if="!disabled" class="el-upload-list__item-delete"
                                                @click="handleRemove(file)">
                                                <i class="el-icon-delete"></i>
                                            </span>
                                        </span>
                                    </div>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisible">
                                    <img width="80%" :src="dialogImageUrl" alt="">
                                </el-dialog>
                            </div>
                            <div class="btn">
                                <el-button type="primary" size="mini" @click="submitUpload">开始上传</el-button>
                                <label>在上传过程中请不要删除原始照片</label>
                            </div>
                        </div>
                    </el-dialog>
                </div>

                <PhotoDetails :handleisShowPhotoDetail="handleisShowPhotoDetail" :album='albumTemporary' 
                :albumlist='photoalbumlist' :albumlistMy='photoalbumlist1' 
                v-if="isShowPhotoDetail" :sonOpenUpPhoto='sonOpenUp'>
                </PhotoDetails>
            </el-tab-pane>
            <!-- 好友相册 -->
            <!-- <el-tab-pane label="好友相册" name="friendAlbum">
                <ul class="friendAlbumBox clearFix" v-if="!isShowPhotoDetail">
                    <li class="friendAlbumList" v-for="(item, index) in albumlistFriend.list" :key="index">
                        <div class="imgBox">
                            <el-image :src="item.cover | pictureUrl" @click="openAlbumPhoto(item)" style="cursor:pointer;" :title="item.photoname">
                                <div slot="placeholder" class="image-slot">
                                    加载中<span class="dot">...</span>
                                </div>
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                        </div>
                        <div class="character clearFix">
                            <div class="avatar">
                                <el-avatar :size="40" :src="item.header | pictureUrl" @error="errorHandler">
                                    <img :src="item.header | pictureUrl" />
                                </el-avatar>
                            </div>
                            <div class="avatarName">
                                <label>{{item.username}}</label>
                            </div>
                            <div class="fabulous">
                                <el-button type="text" class="iconfont icon-zan" style="margin-right: 12px;">
                                </el-button>
                                <el-popover placement="bottom" width="370" trigger="click">
                                    <div>
                                        <el-button type="text" icon="el-icon-picture"></el-button>
                                        <el-input v-model="inputPL" placeholder="请输入内容"
                                            style="width: 260px;margin: 0 15px;"></el-input>
                                        <el-button type="primary" size="mini">发表</el-button>
                                    </div>
                                    <el-button slot="reference" type="text">评论</el-button>
                                </el-popover>

                            </div>
                        </div>
                    </li>
                </ul>
                <PhotoDetails :handleisShowPhotoDetail="handleisShowPhotoDetail" :album='albumTemporary' 
                :albumlist='photoalbumlist' v-if="isShowPhotoDetail" :sonOpenUpPhoto='sonOpenUp'>
                </PhotoDetails>
            </el-tab-pane> -->
        </el-tabs>
    </div>

</template>

<script>
    import PhotoDetails from '@c/photoDetails/photoDetails'
    import {
        mapState
    } from 'vuex'
    export default {
        components: {
            PhotoDetails
        },
        computed: {
            ...mapState({
                // 权限列表
                permissionArr: state => state.commonModule.permissionArr,
                // 用户详细信息
                otherUserInfo: state => state.userModule.otherUserInfo,
                userInfo: state => state.userModule.userInfo,
            })
        },
        created() {
            this.albumVisitorPage()
            this.pagePhotoalbumlist()
            this.pagePhotoalbumlist1()
        },
        watch: {
            albumSort(val) {
                if (val) {
                    this.pagePhotoalbumlist()
                }
            }
        },
        data() {
            return {
                activeName: "meAlbum",
                src: require('../../../assets/img/headportrait03.jpg'),
                uploadPhotoesV: false,
                addAlbumV: false,
                uploadPhotos: false,
                uploadTo: "",
                size: "高清",
                fileList: [],
                addAlbumForm: {
                    imgUrl:'',
                    name: "",
                    describe: "",
                    jurisdictionid: 5,
                    isReprint: '1'
                },
                rules: {
                    name: [{
                        required: true,
                        message: '请输入...'
                    }, ],
                    describe: [{
                        required: true,
                        message: '请输入...'
                    }, ],
                },
                form: {
                    name: "",
                    describe: "",
                    jurisdictionid: 5,
                    isReprint: '1'
                },
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false,
                photoEditing: false,
                inputPL: "",
                isShowPhotoDetail: false,
                photoalbumlist: {},
                photoalbumlist1: {},
                albumSort: 1,
                albumTemporary: {}, //相册暂存
                albumPermissionUV: false,
                upPermission: 5,
                commandTemporary: "edit",
                albumlistFriend: [],
                albumVisitorPageL:[]
            }
        },
        methods: {
            setProminsion(params){
                this.commandTemporary = 'permission'
                this.upPermission = params.jurisdictionid
            },
            // 打开相册相片
            openAlbumPhoto(params){
                this.isShowPhotoDetail = true
                this.albumTemporary = params
                if(params.id && params.userid){
                    this.$store.dispatch('visitorAllModule/visitorAdd', {
                        fromuserid: params.userid,
                        visitorid: params.id,
                        type: 0
                    })
                }
            },
            sonOpenUp(params){
                this.pagePhotoalbumlist()
                if(params){
                    this.uploadPhotos = true
                    this.isShowPhotoDetail = false
                }
            },
            // 获取访客列表 
            albumVisitorPage(){
                 this.$store.dispatch('photoalbumModule/albumVisitorPage', {
                    userId: this.otherUserInfo.userid,
                }).then(res => {
                    if (res.data.code === 200) {
                        this.albumVisitorPageL = res.data
                    }
                })
            },
            // 更新相册
            updatePhotoalbum(){
                this.$store.dispatch('photoalbumModule/updatePhotoalbum', {
                    photoname: this.albumTemporary.photoname,
                    discribe: this.albumTemporary.discribe,
                    id: this.albumTemporary.id,
                    userid: this.otherUserInfo.userid,
                }).then(res => {
                    if (res.data.code === 200) {
                        this.$message.success('更新相册成功')
                        this.photoEditing = false
                        this.pagePhotoalbumlist()
                    }
                })
            },
            // 批量操作设置权限
            updatePermissionDo() {
                this.$store.dispatch('photoalbumModule/permission', {
                    id: this.albumTemporary.id,
                    jurisdictionid: this.upPermission,
                    userid: this.otherUserInfo.userid,
                    reprint: this.albumTemporary.reprint,
                    cover: this.albumTemporary.cover
                }).then(res => {
                    if (res.data.code === 200) {
                        this.$message.success('更新权限成功')
                        this.albumPermissionUV = false
                        this.pagePhotoalbumlist()
                    }
                })
            },
            // 新增相册
            addAlbumSub(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$store.dispatch('photoalbumModule/addPhotoalbum', {
                            cover: this.fileList[0].response.result.originalUrl,
                            discribe: this.addAlbumForm.describe,
                            friendreprint: this.addAlbumForm.isReprint == '1' ? true : false,
                            jurisdictionid: this.addAlbumForm.jurisdictionid,
                            photoname: this.addAlbumForm.name,
                            photoorigin: 1,
                            reprint: this.addAlbumForm.isReprint == '1' ? true : false,
                            userid: this.otherUserInfo.userid,
                        }).then(res => {
                            if (res.data.code === 200) {
                                this.$message.success(res.data.msg)
                                this.addAlbumV = false
                                this.pagePhotoalbumlist()
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            handleChange(file, fileList) {
                this.fileList = fileList
            },
            // 上传图片到相册
            submitUpload() {
                if(this.uploadTo){
                    var urls= []
                    if(this.fileList.length>0){
                        this.fileList.map(item =>{
                            if(item.response.code == 200){
                                urls.push(item.response.result.originalUrl)
                            }
                        })
                        this.$store.dispatch('photoalbumModule/photoUpImgs', {
                            urls: urls,
                            photoid: this.uploadTo
                        }).then(res => {
                            if (res.data.code === 200) {
                                this.fileList = []
                                this.$message.success('上传图片成功')
                                this.uploadPhotos = false
                                this.$refs.upload.clearFiles();
                                this.pagePhotoalbumlist()
                            }
                        })
                    }else{
                        this.$message.warning('请先选择图片')
                        return
                    }
                }else{
                        this.$message.warning('请选择上传到的相册')
                        return
                    }
                
            },
            // 显示照片详情
            handleisShowPhotoDetail() {
                this.pagePhotoalbumlist()
                this.isShowPhotoDetail = false
            },
            handleClick(tab, event) {
                this.isShowPhotoDetail = false
                if(tab.name == 'meAlbum'){
                    this.pagePhotoalbumlist()
                }else{
                    this.albumPageFriend()
                }
            },

            handleRemove(file, fileList) {
            },

            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },

            errorHandler() {
                return true
            },
            // 照片组下拉菜单点击
            handlePhotoEditing(command) {
                this.albumTemporary = command
                if (this.commandTemporary == "edit") {
                    this.photoEditing = true
                } else if (this.commandTemporary == "delete") {
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$store.dispatch('photoalbumModule/removePhotoalbum', {
                            userid: this.otherUserInfo.userid,
                            ids: this.albumTemporary.id
                        }).then(res => {
                            if (res.data.code === 200) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                this.pagePhotoalbumlist()
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                } else {
                    this.albumPermissionUV = true
                }
            },

            // 删除访问记录
            handleDeleteRecord() {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            // 我的好友相册列表
            albumPageFriend() {
                this.$store.dispatch('photoalbumModule/albumPageFriend', {
                    sort: this.albumSort,
                    userid: this.otherUserInfo.userid,
                    search: null,
                    page: 1,
                    limit: 10,
                }).then(res => {
                    if (res.data.code === 200) {
                        this.albumlistFriend = res.data.result
                    }
                }).catch(err => {
                })
            },
            // 被访问者相册列表
            pagePhotoalbumlist() {
                this.$store.dispatch('photoalbumModule/pagePhotoalbumlist', {
                    sort: this.albumSort,
                    userid: this.otherUserInfo.userid,
                    search: null,
                    page: 1,
                    limit: 10,
                }).then(res => {
                    if (res.data.code === 200) {
                        this.photoalbumlist = res.data.result
                    }
                }).catch(err => {
                })
            },
            // 访问者相册列表
            pagePhotoalbumlist1() {
                this.$store.dispatch('photoalbumModule/pagePhotoalbumlist', {
                    sort: 1,
                    userid: this.userInfo.id,
                    search: null,
                    page: 1,
                    limit: 10,
                }).then(res => {
                    if (res.data.code === 200) {
                        this.photoalbumlist1 = res.data.result
                    }
                }).catch(err => {
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .albumBox {
        box-sizing: border-box;
        padding: 15px;
        background-color: white;

        .btns {
            text-align: left;

            .newly {
                margin-right: 15px;
            }
        }

        .photoBox {
            color: #303133;
            font-size: 14px;
            margin: 20px 0;

            .photoList {
                padding: 8px;
                box-sizing: border-box;
                float: left;
                background-color: #f5f7fa;
                margin-right: 10px;
                margin-bottom: 10px;

                .photo {
                    position: relative;
                    overflow: hidden;

                    .imgBox {
                        width: 196px;
                        height: 196px;
                    }

                    .imgNum {
                        position: absolute;
                        left: 0;
                        bottom: 0px;
                        width: 100%;
                        text-align: right;
                        box-sizing: border-box;
                        padding: 5px;
                        background-color: rgba(255, 255, 255, .6);
                        font-weight: bold;
                        transition: bottom .3s;
                    }

                    .dropdownBox {
                        position: absolute;
                        top: 0;
                        right: 0px;
                        background-color: white;
                        z-index: 9;
                        font-size: 22px;
                        cursor: pointer;
                        width: 20px;
                    }
                }

                .classificationName {
                    margin-top: 8px;

                    .className {
                        display: block;
                        width: 100px;
                        float: left;
                        text-align: left;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .jurisdiction {
                        float: right;
                    }
                }
            }
        }

        .recentVisitors {
            color: #303133;
            font-size: 14px;

            .total {
                text-align: left;
                box-sizing: border-box;
                border-bottom: 1px solid #909399;

                label {
                    margin-right: 20px;
                }
            }

            .visitorsBox {
                margin: 10px 0;

                .visitorsList {
                    float: left;
                    margin: 0 10px 10px 0;
                    position: relative;
                    overflow: hidden;

                    .delete {
                        position: absolute;
                        top: 0;
                        right: -14px;
                        z-index: 9;
                        font-size: 16px;
                        color: black;
                        transition: right .3s;
                    }

                    .visitorsPortrait {
                        position: relative;

                        .visitorsName {
                            display: block;
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            width: 100%;
                            box-sizing: border-box;
                            padding: 3px 0;
                            background-color: rgba(255, 255, 255, .6);
                            font-size: 12px;
                        }
                    }
                }

                .visitorsList:hover .delete {
                    right: 0;
                }
            }
        }

        ul {
            list-style-type: none;
            margin-block-start: 0;
            margin-block-end: 0;
            padding-inline-start: 0;
        }

        .uploadPhotosBox {
            .uploadTo {
                .sizeLeft {
                    margin-left: 22px;
                }
            }

            .uploadList {
                margin: 15px 0;
                box-sizing: border-box;
                padding: 5px;
                background-color: #f5f7fa;
            }

            .btn {
                label {
                    margin-left: 15px;
                }
            }
        }

        .friendAlbumBox {
            width: 100%;

            .friendAlbumList {
                float: left;
                box-sizing: border-box;
                padding: 8px;
                background-color: #f5f7fa;
                margin: 0 10px 10px 0;

                .imgBox {
                    width: 196px;
                    height: 196px;
                }

                .character {
                    margin-top: 15px;

                    .avatar {
                        float: left;
                    }

                    .avatarName {
                        float: left;
                        margin-left: 5px;
                        font-size: 14px;
                        color: #303133;
                        margin-top: 12px;
                        width: 90px;
                        text-align: left;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .fabulous {
                        float: right;
                    }
                }
            }
        }

        .clearFix::after {
            content: "";
            display: block;
            width: 100%;
            font-size: 0;
            clear: both;
        }
    }
</style>